<script lang="ts" setup>
import { SmileOutlined, DownOutlined } from "@ant-design/icons-vue";
import { computed, onMounted, reactive, ref } from "vue";
import {
  deletePictureUsingPost,
  listPictureTagCategoryUsingGet,
  listPictureVoByPageUsingPost,
} from "@/api/pictureController.ts";
import { message } from "ant-design-vue";
import dayjs from "dayjs";

const columns = [
  {
    title: "id",
    dataIndex: "id",
    width: 80,
  },
  {
    title: "图片",
    dataIndex: "url",
  },
  {
    title: "名称",
    dataIndex: "name",
  },
  {
    title: "简介",
    dataIndex: "introduction",
    ellipsis: true,
  },
  {
    title: "类型",
    dataIndex: "category",
  },
  {
    title: "标签",
    dataIndex: "tags",
  },
  {
    title: "图片信息",
    dataIndex: "picInfo",
  },
  {
    title: "用户 id",
    dataIndex: "userId",
    width: 80,
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
  },
  {
    title: "编辑时间",
    dataIndex: "editTime",
  },
  {
    title: "操作",
    key: "action",
  },
];

const dataList = ref<API.PictureVO[]>([]);
const total = ref(0);

const fetchData = async () => {
  const res = await listPictureVoByPageUsingPost({
    ...searchParams,
  });
  if (res.code === 0 && res.data) {
    dataList.value = res.data.records ?? [];
    total.value = res.data.total ?? 0;
  } else {
    message.error("获取数据失败，" + res.message);
  }
};

const searchParams = reactive<API.PictureQueryDTO>({
  current: 1,
  pageSize: 10,
  sortField: "createTime",
  sortOrder: "descend",
});

const pagination = computed(() => {
  return {
    current: searchParams.current,
    pageSize: searchParams.pageSize,
    total: total.value,
    showSizeChanger: true,
    showQuickJumper: true,
    position: "bottomCenter",
    showTotal: (total: number) => `共 ${total} 条`,
  };
});

const doTableChange = (page: any) => {
  searchParams.current = page.current;
  searchParams.pageSize = page.pageSize;
  fetchData();
};

const doSearch = () => {
  searchParams.current = 1;
  fetchData();
};

//删除一条数据
const doDelete = async (id: number) => {
  const res = await deletePictureUsingPost({
    id: id,
  });
  if (res.code === 0) {
    message.success("删除成功");
    //刷新数据
    await fetchData();
  } else {
    message.error("删除失败，" + res.message);
  }
};

const categoryOptions = ref<string[]>([]);
const tagOptions = ref<string[]>([]);

const getTagCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet();
  if (res.code === 0 && res.data) {
    categoryOptions.value = (res.data.tagList ?? []).map((data) => {
      return {
        value: data,
        label: data,
      };
    });
    tagOptions.value = (res.data.categoryList ?? []).map((data) => {
      return {
        value: data,
        label: data,
      };
    });
  } else {
    message.error("获取标签和分类失败，" + res.message);
  }
};

onMounted(() => {
  fetchData();
  getTagCategoryOptions();
});
</script>
<template>
  <!--  搜索表单-->
  <a-form
    layout="inline"
    :model="searchParams"
    @finish="doSearch"
    style="margin-bottom: 16px"
  >
    <a-form-item label="关键词">
      <a-input
        v-model:value="searchParams.searchText"
        placeholder="从名称和简介搜索"
        allow-clear
      />
    </a-form-item>
    <a-form-item label="类型">
      <a-auto-complete
        v-model:value="searchParams.category"
        placeholder="请输入类型"
        :options="categoryOptions"
        style="min-width: 180px"
        allow-clear
      />
    </a-form-item>
    <a-form-item label="标签">
      <a-select
        v-model="searchParams.tags"
        placeholder="请输入标签"
        mode="tags"
        :options="tagOptions"
        style="min-width: 180px"
        allow-clear
      />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit"> 搜索 </a-button>
    </a-form-item>
  </a-form>
  <!--  表格-->
  <a-table
    :columns="columns"
    :data-source="dataList"
    :pagination="pagination"
    @change="doTableChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'url'">
        <a-image :src="record.url" width="120px" />
      </template>
      <template v-if="column.dataIndex === 'tags'">
        <a-space wrap>
          <a-tag v-for="tag in record.tags" color="green">{{ tag }}</a-tag>
        </a-space>
      </template>
      <template v-if="column.dataIndex === 'picInfo'">
        <div>格式：{{ record.picFormat }}</div>
        <div>宽度：{{ record.picWidth }}</div>
        <div>高度：{{ record.picHeight }}</div>
        <div>宽高比：{{ record.picScale }}</div>
        <div>大小：{{ (record.picSize / 1024).toFixed(2) }}KB</div>
      </template>
      <template v-else-if="column.dataIndex === 'createTime'">
        {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
      <template v-else-if="column.dataIndex === 'editTime'">
        {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
      <template v-else-if="column.key === 'action'">
        <a-space wrap>
          <a-button type="primary" :href="`/addPicture?id=${record.id}`">编辑</a-button>
          <a-button danger @click="doDelete(record.id)">删除</a-button>
        </a-space>
      </template>
    </template>
  </a-table>
</template>
